<template>
	<view class="uni-container">
		<view class="main_top">
			<view class="logo_cart">
				<view class="logo_left">
					<image src="@/static/image/JneyTo.png" mode="aspectFill"></image>
				</view>
				<view class="cart-dots">
					<!-- <view class="cart">
						<uni-badge class="uni-badge-left-margin" :text="cartGoodsNum" absolute="rightTop" size="small">
							<uni-icons type="cart-filled" size="26" color="#66596c"></uni-icons>
						</uni-badge>
					</view> -->
					<view class="dots">
						<uni-icons type="more-filled" size="26" color="#66596c" v-if="!threeDotShow"
							@click="showActionSheet"></uni-icons>
						<image src="@/static/icons/card/take-card.png" mode="aspectFill" v-else
							@click="toTakeCard"></image>
					</view>
				</view>
			</view>
			<view class="search_jiaHao">
				<!-- <view class="easy_input_view" @click="toHomeSearchPage">
					<uni-easyinput prefixIcon="search" v-model="keyValue" :placeholder="indexSearchPlaceholder"
						@iconClick="iconClick" class="easy_input_class">
					</uni-easyinput> -->

				<view class="search-bar" @click="toHomeSearchPage">
					<view class="input-profix">
						<image src="@/static/icons/input-profix.png" mode="aspectFill"></image>
					</view>
					<input type="text" placeholder="Search" />
				</view>

				<!-- <view class="jiaHao" @click="showActionSheet" v-show="jiahapShow">
					<uni-icons type="plusempty" size="26"></uni-icons>
				</view> -->
			</view>

			<!-- 点击加号弹出 -->
			<uni-popup ref="popup" type="right" background-color="#fff" @change="changePopShow">
				<view class="popup-content">
					<view class="top-icon">
						<view class="top-icon-bg">
							<image
								src="https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com/app/static/image/image/little-duck.png"
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="opeation-text">
						操作
					</view>
					<view class="front_icon_text" v-for="(item,index) in popupList" :key="index"
						@click="clickPopupItem(item)">
						<view class="front_icon">
							<image :src="item.iconUrl" mode="aspectFit" class="open_icon_iamge"></image>
						</view>
						<view class="icon_text">
							{{item.iconText}}
						</view>
					</view>
					<view class="return-btn">
						<button type="default" @click="closePop">
							<text style="font-size: 16px; margin-right: 8px;">返回</text>
							<uni-icons type="arrow-right" size="25"></uni-icons>
						</button>
					</view>

					<view class="color-qr-views">
						<!-- <view class="color-one"></view>
						<view class="color-two"></view>
						<view class="color-three"></view> -->
					</view>

					<view class="version-view">
						版本号：{{version}}
					</view>
				</view>
			</uni-popup>

			<!-- 顶部导航组件 -->
			<HomePageTopBar @currentHomePageId="getCurrentHomePageId"></HomePageTopBar>
		</view>
		<component :is="currentComponent" class="component-convert"></component>
	</view>
</template>
<script>
	import RecommendPage from '@/pages/tabBar/component/topBar/recommendPage.vue'
	import TravelPage from '@/pages/tabBar/component/topBar/travelPage.vue'
	// import InformationPage from '@/pages/tabBar/component/topBar/informationPage.vue'
	import HomePageTopBar from '@/components/homePageTopBar.vue'
	import TravelCard from '@/pages/tabBar/component/topBar/travelCard.vue'
	import {
		getHotSearchKey
	} from '@/request/recover.js'
	import { checkIsLogin } from '@/common/util';
	import mitter from '@/common/mitt/eventBus.js';
	export default {
		components: {
			RecommendPage,
			TravelPage,
			// InformationPage,
			HomePageTopBar,
			TravelCard
		},
		data() {
			return {
				cartGoodsNum: 3, // 购物车商品数量
				jiahapShow: false, // 加号是否展示
				isLogin: false, // 是否登录
				indexSearchPlaceholder: '大家正在搜： ',
				reDian: '', // 搜的最多的
				keyValue: '',
				swiperDotIndex: 0,
				currentComponent: 'RecommendPage', // 当前页面是推荐页面
				popupList: [{
						iconUrl: 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com/app/static/image/icons/scan.png',
						iconText: '扫一扫'
					},
					{
						iconUrl: 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com/app/static/image/icons/edit.png',
						iconText: '写笔记'
					},
					{
						iconUrl: 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com/app/static/image/icons/add-friend.png',
						iconText: '加朋友'
					},
					{
						iconUrl: 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com/app/static/image/icons/create-group.png',
						iconText: '建群'
					}
				],
				version: 'V1.0.0', // 应用的版本号
				threeDotShow: false, // 控制右上角三个点的显示
			}
		},

		onLoad() {
			// 获取大家正在搜的最多的关键词
			this.getHotSearchKey();
		},
		onShow() {
			// 判断是否登录，如果没有登录直接跳转登录页面
			checkIsLogin();
		},

		mounted() {
			const _this = this;
			// 监听抽屉关闭
			mitter.on('closeDraft', (eventData) => {
				if (eventData) {
					_this.$refs.popup.close();
				}
			});
			// 接收信息控制右上角三个点的显示
			mitter.on('threeDotShow', (eventData) => {
				_this.threeDotShow = eventData;
			});
		},

		beforeDestroy() {
			mitter.off('closeDraft');
			mitter.off('threeDotShow');
		},

		methods: {

			// 获取大家正在搜的最多的关键词
			getHotSearchKey() {
				const _this = this;
				getHotSearchKey().then(res => {
					if (res.data.code === 10000) {
						_this.reDian = res.data.data;
						_this.indexSearchPlaceholder = "大家正在搜： " + this.reDian;
					} else {
						_this.indexSearchPlaceholder = "大家正在搜： "
					}
				}).catch(err => {
					console.log(err);
					_this.indexSearchPlaceholder = "大家正在搜： "
				})
			},

			// 得到当前导航栏的页面ID
			getCurrentHomePageId(id) {
				if (id === 1) {
					this.jiahapShow = false;
					this.currentComponent = 'RecommendPage';
				} else if (id === 2) {
					this.jiahapShow = true;
					this.currentComponent = 'TravelPage';
				}
				// else if (id === 3) {
				// 	this.jiahapShow = false;
				// 	this.currentComponent = 'InformationPage'
				// } 
				else {
					this.jiahapShow = false;
					this.currentComponent = 'TravelCard'
				}
			},

			// 点击搜索图标
			iconClick() {
				uni.navigateTo({
					url: '/pages/tabBar/component/homeSearch'
				})
			},

			closePop() {
				this.$refs.popup.close();
			},

			// 点击输入框去首页搜索页面
			toHomeSearchPage() {
				uni.navigateTo({
					url: '/pages/tabBar/component/homeSearch'
				})
			},

			changePopShow(e) {
				// console.log('当前模式：' + e.type + ',状态：' + e.show);
			},

			// 点击右上角的加号弹出菜单框
			showActionSheet() {
				this.$refs.popup.open();
				// 获取应用的版本号
				this.getVersionFunc();
			},

			// 获取应用的版本号
			getVersionFunc() {
				const that = this;
				uni.getSystemInfo({
					success: function(res) {
						console.log(res);
						console.log("应用版本号：", res.appVersion);
						// 可以将版本号存储在一个变量中
						that.version = "V" + res.appVersion.toString();
					},
					fail: function(err) {
						console.error("获取系统信息失败：", err);
						that.version = 'V1.0.0'
					}
				});
			},

			// 点击右边弹出的某一项
			clickPopupItem(item) {
				// console.log(item);
				if (item.iconText === "写笔记") {
					uni.navigateTo({
						url: '/pages/tabBar/component/topBar/addOrEditNote',
					})
				} else if (item.iconText === '扫一扫') {
					uni.scanCode({
						success(res) {
							uni.showToast({
								title: "识别成功！",
								icon: 'none'
							})
							console.log(res.result);
							if (res.result.includes('?')) {
								const questionIndex = res.result.lastIndexOf('?');
								const queryString = res.result.substring(questionIndex + 1);
								console.log("component页面的userAid:",queryString);
								uni.navigateTo({
									url: `/pages/tabBar/template/userDetailPage?aid=${queryString}`
								})
							}
						},
						fail(err) {
							uni.showToast({
								title: "扫描失败！",
								icon: 'none'
							})
							console.log(err);
						}
					})
					this.$refs.popup.close();
				} else if(item.iconText === '加朋友'){
					uni.showToast({
						title: '敬请期待',
						icon: 'none'
					})
					this.$refs.popup.close();
				} else if(item.iconText === '建群'){
					uni.showToast({
						title: '敬请期待',
						icon: 'none'
					})
					this.$refs.popup.close();
				}
			},

			// 点击右上角的打卡图标，去打卡
			toTakeCard() {
				uni.navigateTo({
					url: '/pages/tabBar/component/topBar/card/punchClockPage'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import '../../../common/uni-nvue.css';


	/* .uni-container {
		height: calc(100vh - 60rpx);
	} */

	.popup-content {
		display: flex;
		flex-direction: column;
		width: 400rpx;
		height: 100%;
		padding-top: 50px;
		position: relative;

		.top-icon {
			width: 100px;
			height: 100px;
			border-radius: 25px;
			border: solid 1px #66596b;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: auto;
			margin-right: auto;

			.top-icon-bg {
				width: 80px;
				height: 80px;
				background-color: #EDF1FA;
				border-radius: 25px;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 45px;
					height: 45px;
				}
			}
		}

		.opeation-text {
			width: 100px;
			margin-left: 20px;
			margin-top: 30px;
			// background-color: #66596b;
			color: #30444E;
			font-size: 24px;
			font-weight: bold;
		}

		.return-btn {
			width: 100px;
			margin-left: 20px;
			margin-top: 40px;
			text-align: left;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

			button {
				width: 100px;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
				border-radius: 12px;
				border: solid 1px #30444E;
			}
		}

		.color-qr-views {
			.color-one {
				position: absolute;
				right: -99px;
				bottom: 70px;
				background-color: #30444E;
				width: 100px;
				height: 220px;
				border-radius: 20px;
				border-bottom-left-radius: 0;
				transform-origin: left bottom;
				transform: rotate(-10deg);
				z-index: 3;
			}

			.color-two {
				position: absolute;
				right: -99px;
				bottom: 70px;
				background-color: #3DD598;
				width: 100px;
				height: 220px;
				border-radius: 20px;
				border-bottom-left-radius: 0;
				transform-origin: left bottom;
				transform: rotate(-20deg);
				z-index: 2;
			}

			.color-three {
				position: absolute;
				right: -99px;
				bottom: 70px;
				background-color: #FF565E;
				width: 100px;
				height: 220px;
				border-radius: 20px;
				border-bottom-left-radius: 0;
				transform-origin: left bottom;
				transform: rotate(-30deg);
				z-index: 1;
			}

		}

		.version-view {
			position: absolute;
			bottom: 70px;
			left: 20px;
			font-size: 12px;
			color: #96A7AF;
		}
	}

	.front_icon_text {
		margin-left: 20px;
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
		margin-top: 30px;
		// background-color: #facbe2;
	}

	.open_icon_iamge {
		width: 20px;
		height: 20px;
	}

	.main_top {
		width: 100vw;
		// height: 300px;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99999;
		border-radius: 4px;
		// background-color: #fff;
		/* opacity: 0.1; */
	}

	.component-convert {
		margin-top: 200rpx;
	}

	.front_icon {
		// width: 25%;
	}

	.icon_text {
		// width: 75%;
		margin-left: 10px;
		text-align: center;
		font-size: 16px;
		color: #96A7AF;
		/* background-color: #ffecb3; */
	}

	.search_jiaHao {
		/* margin-top: 30rpx; */
	}

	.logo_cart {
		width: 85%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// background-color: #30444E;
	}

	.logo_left {
		image {
			width: 140px;
			height: 60px;
		}
	}



	.cart-dots {
		display: flex;
	}

	.dots {
		margin-left: 20px;

		image {
			width: 25px;
			height: 25px;
		}
	}

	.search-bar {
		width: 70%;
		display: flex;
		height: 32px;
		background-color: #E8EEF0;
		border-radius: 16px;
		align-items: center;
	}

	.search-bar input {
		width: 70%;
		background-color: #E8EEF0;
		font-family: Microsoft YaHei;
		font-size: 14px;
		font-weight: normal;
		line-height: 20px;
		margin-left: 10px;

	}

	.input-profix image {
		width: 18px;
		height: 18px;
		margin-left: 17px;
		display: flex;
		align-items: center;
	}
</style>